<template>
	<div ref="playBox" class="content">
		<mt-header fixed title='精品课' class="heade" style="background-color: #FA8C13;">
    	<mt-button icon="back" slot="left" @click="back"></mt-button>	

		</mt-header>
		<p>{{ vname }}</p>
		<div id="playBox">

		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { Indicator } from 'mint-ui';
	export default {
		data() {
			return {
				loading: true,
				vname: ''
			}
		},
		created() {
			$(function() {
				var h = document.body.clientHeight;
				$('.content').css('min-height', h - 44 + 'px')
			})
		},
		activated() {
			Indicator.open({
				text: 'Loading...',
				spinnerType: 'triple-bounce'
			});
			setTimeout(function(){
			Indicator.close()},500)
			var playBox = document.querySelector('#playBox')
			if(playBox.childNodes.length>0){
			playBox.removeChild(playBox.childNodes[0])
				
			}
			this.vname = this.$route.params.vname;
			var that = this;
			var _src = "http://p.bokecc.com/player?vid=" + this.$route.params.vid + "&siteid=0C728A4805962911&autoStart=true&width=100%&height=90.8%&playerid=A8E5C78ED3BA6213&playertype=1"
			var scrip = document.createElement('script');
			scrip.src = _src
			scrip.type = "text/javascript"
			playBox.appendChild(scrip)
		},
		methods: {
		back(){
			window.history.back()
		}
		}
	}
</script>

<style scoped>
	#playBox {
		width: 100%;
		height: 6.4rem;
		margin-top: 10px;
	}
	
	.content {
		background-color: #4a4a4a;
	}
	
	p {
		font-size: 14px;
		color: #FFFFFF;
	}
</style>